<template>
  <div>
    <!--<div class="body" v-show="shows">12111111312</div>
    <ul class="aaa">
      &lt;!&ndash; 循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式 &ndash;&gt;
      <li :class="[{active:item.show}]" @click="changeli(index,item)" v-for="(item,index) in headerData" :key="item.id" class="bbb">
        &lt;!&ndash; 在这里打印出boll值方便查看 &ndash;&gt;
        {{item.name}}{{item.show}}
        &lt;!&ndash; 判断当前这条数据的bool值如果是true就打开二级菜单,如果是false就关闭二级菜单 &ndash;&gt;
      <ul v-show="item.show" class="ccc">
        &lt;!&ndash; 循环二级菜单数据并使用.stop阻止冒泡 &ndash;&gt;
        <li v-for="(a,index) in item.list" v-on:click.stop="doThis(index)" :key="a.id" class="ddd">{{a}}</li>
      </ul>
      </li>
    </ul>
    <div class="body" v-show="shows">12111111312</div>-->
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      shows: true,
      headerData: [{
        name: '全部类目',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }, {
        name: '附近商家',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }, {
        name: '智能排序',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }, {
        name: '筛选',
        list: ['子集', '子集', '子集', '子集', '子集'],
        show: false
      }]
    }
  },
  created: function () {
    console.log(this.$route.query.id)
  },
  methods: {
    changeli: function (ind, item) {
      // 先循环数据中的show将其全部置为false,此时模板里的v-if判断生效关闭全部二级菜单,并移除样式
      this.headerData.forEach(i => {
        // 判断如果数据中的headerData[i]的show属性不等于当前数据的show属性那么headerData[i]等于false
        if (i.show !== this.headerData[ind].show) {
          i.show = false
          this.shows = true
        }
      })
      // 取反(true或false)
      item.show = !item.show
      this.headerData.forEach(i => {
        if (i.show === true) {
          this.shows = false
        }
      })
      console.log(item.name)
    },
    doThis: function (index) {
      alert(index)
    }
  }
}
</script>

<style scoped >
  /**{
    padding: 0;
    margin: 0;
  }
  li{
    list-style: none;
  }
  .body{
    width: 200px;
    height: 200px;
    background-color: black;
  }
.aaa{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .bbb{
    width: 20%;
    height: 40px;
    background-color: aqua;
    .ccc{
      padding-top: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .ddd{
        display: flex;
        background-color: yellow;
      }
    }
  }*/

</style>
